<template>
	<div id="assort" v-if="list.length">
		<topsousuonav :title="'点击搜索商品信息'" :bgcolorA="'#fff'" :pushsousuo="true"></topsousuonav>
		<div class="content">
			<div class="left">
				<ul>
					<li v-for="(item,index) in list" :key="index" @click="current = index"
						:class="{'active':current==index}">
						{{item.cate_name}}
					</li>
				</ul>
			</div>
			<div class="right" v-if="list.length">
				<ul>
					<li v-for="(item,index) in list[current].children" :key="index">
						<h3>
							{{ item.cate_name }}
						</h3>
						<item :list="item.children"></item>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<Details v-else></Details>
</template>

<script>
	// <!-- 导入api文件 -->
	import {
		// 获取分页列表信息
		Getassort
	} from "@/api/assort"
	import item from '@/components/assort/item.vue'
	import topsousuonav from '@/components/topsousuonav.vue'
	// 骨架屏
	import Details from '@/components/Skeleton/Details.vue'
	export default {
		name: "assort",
		components: {
			item,
			topsousuonav,
			Details
		},
		data() {
			return {
				current: 0, //默认第0个按钮被选中
				// 列表数据
				list: []
			}
		},
		created() {
			Getassort().then(res => {
				console.log(res)
				this.list = res.data.data.list
				console.log("this.list", this.list)
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#assort {
		width: 100vw;
		background-color: #f7f7f7;
		min-height: 100vh;
		padding-top: 50 * $width;

		.content {
			display: flex;

			.left {

				// 隐藏滚动条并可以滚动内容
				ul::-webkit-scrollbar {
					width: 0 !important;
				}

				ul {
					width: 100 * $width;
					height: 735 * $width;
					overflow: scroll;

					li {
						width: 100 * $width;
						height: 50 * $width;
						line-height: 50 * $width;
						text-align: center;
						background-color: #ffffff;

					}

					.active {
						color: #e93323;
						font-weight: 600;
						background-color: #f7f7f7;
						border-left: 3 * $width solid #e93323;
					}
				}
			}

			.right {
				margin-left: 10 * $width;

				// 隐藏滚动条并可以滚动内容
				ul::-webkit-scrollbar {
					width: 0 !important;
				}

				ul {
					overflow: scroll;
					height: 735 * $width;

					li {
						h3 {
							font-size: 16 * $width;
							line-height: 50 * $width;
							padding-left: 10 * $width;
						}
					}
				}
			}
		}
	}
</style>
